<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
        <link rel="stylesheet" href="../css/frozen.css">
        <link rel="stylesheet" href="demo.css">
        <script src="../lib/zepto.min.js"></script>
        <script src="../js/frozen.js"></script>
    </head>
    
    <body ontouchstart>
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>布局 layout</h1><button class="ui-btn">回首页</button>
        </header>
        <footer class="ui-footer ui-footer-btn">
            <ul class="ui-tiled ui-border-t">
                <li data-href="index.html" class="ui-border-r"><div>基础样式</div></li>
                <li data-href="ui.html" class="ui-border-r"><div>UI组件</div></li>
                <li data-href="js.html"><div>JS插件</div></li>
            </ul>
        </footer>
        <section class="ui-container">




<section id="layout">
    <div class="demo-item">
        <p class="demo-desc">平铺</p>
        <div class="demo-block">
            <ul class="ui-tiled">
                <li><div>菜单</div><i>1</i></li>
                <li><div>菜单</div><i>2</i></li>
                <li><div>菜单</div><i>3</i></li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">flex布局排列，默认横排</p>
        <div class="demo-block"> 
            <div class="ui-flex ui-flex-pack-start">
                <div>左</div><div>左</div>
            </div>
            <div class="ui-flex ui-flex-pack-center">
                <div>中</div><div>中</div>
            </div>
            <div class="ui-flex ui-flex-pack-end">
                <div>右</div><div>右</div>
            </div>
            <div class="ui-flex ui-flex-align-start">
                <div>上</div><div>上</div>
            </div>
            <div class="ui-flex  ui-flex-align-center">
                <div>中</div><div>中</div>
            </div>
            <div class="ui-flex ui-flex-align-end">
                <div>下</div><div>下</div>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">flex布局排列纵向,以此类推</p>
        <div class="demo-block"> 
            <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start">
                <div>左中</div>
                <div>左中</div>
            </div>
        </div>
    </div> 
    <div class="demo-item">
        <p class="demo-desc">flex网格布局</p>
        <div class="demo-block"> 
            <ul class="ui-row-flex">
                <li class="ui-col ui-flex ui-flex-pack-start"><div>左</div><div>左</div></li>
                <li class="ui-col ui-flex ui-flex-pack-center"><div>中</div><div>中</div></li>
                <li class="ui-col ui-flex ui-flex-pack-end"><div>右</div><div>右</div></li>
                <li class="ui-col ui-flex ui-flex-ver  ui-flex-align-end ui-flex-pack-end"><div>竖排右下</div><div>竖排右下</div></li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">布局1</p>
        <div class="demo-block">
            <header class="ui-header ui-header-stable ui-border-b">
                <i class="ui-icon-return" onclick="history.back()"></i><h1>layout</h1><button class="ui-btn">回首页</button>
            </header>
            <footer class="ui-footer ui-footer-stable ui-border-t">
                <ul class="ui-tiled">
                    <li><div>菜单</div><i>1</i></li>
                    <li><div>菜单</div><i>2</i></li>
                    <li><div>菜单</div><i>3</i></li>
                </ul>
            </footer>
            <section class="ui-container ui-center">
                内容
            </section>
         </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">布局2</p>
        <div class="demo-block">
            <header class="ui-header ui-header-positive ui-border-b">
                <h1>标题</h1>
            </header>
            <div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg ui-btn-primary">
                    同意
                </button>
            </div>
            <section class="ui-container ui-center">
                内容
            </section>
         </div>
    </div> 
</section>


        </section><!-- /.ui-container-->
        <script>
        $('.ui-list li,.ui-tiled li').click(function(){
            if($(this).data('href')){
                location.href= $(this).data('href');
            }
        });
        $('.ui-header .ui-btn').click(function(){
            location.href= 'index.html';
        });
        </script>
    </body>
</html>